<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0;"/>
    <title>注册页面</title>
    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <link href="../showstatic/js/layer-v3.0.3/layer/mobile/need/layer.css" rel="stylesheet" type="text/css" />

    <link rel="stylesheet" type="text/css" href="../css/style.css" />

    <link href="../showstatic/css/login.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="../showstatic/js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="../showstatic/js/phone.js" ></script>
    <script type="text/javascript" src="../showstatic/js/layer-v3.0.3/layer/mobile/layer.js"></script>
    <script type="text/javascript" src="../js/verificationNumbers.js"></script>
    <script type="text/javascript" src="../js/Particleground.js"></script>
    <style>
        canvas {
            z-index: -1;
            position: absolute;
        }
    </style>
</head>

<body>
<header class="header">
    <a href="javascript:history.back(-1)" class="fa fa-angle-left"></a>
    <span class="names">注册</span>
</header>
<div class="login_contnet">
    <div class="commons user">
        <i class="fa fa-user"></i>
        <input type="number"   name="tel" class="tel" id="account" placeholder="请输入您的手机号" />
    </div>
    <div class="commons pasd" id="div1_pas" >
        <i class="fa fa-unlock-alt"></i>
        <input type="password"  value="" name="pasd" id="pas" class="pasd" placeholder="请输入6~16位密码" />
    </div>

    <div class="commons user" id="phone_code" >
        <input type="text"     placeholder="请输入验证码" id="code"/>
        <a href="javascript:void(0)" onclick="getcode()" id="chang_href" class="common_use change" style="font-size: 30px;color: chocolate">获取手机验证码</a>
    </div>

    <!--<div class="commons user" id="vali" >
        <div class="checkcode">
            <input type="text" id="J_codetext" placeholder="验证码" maxlength="4" class="login_txtbx" style="width: 280px">
            <canvas style="height: 96px;width: 170px" class="J_codeimg" id="myCanvas" onclick="create()"></canvas>
            <input type="button" value="获取验证码" class="ver_btn" onClick="validate()" style="height: 96px;width: 160px; float: right">
        </div>

        <div class="checkcode">
            <input type="text" id="J_codetext" placeholder="验证码" maxlength="4" class="login_txtbx">
            <canvas class="J_codeimg" id="myCanvas" onclick="createCode()">对不起，您的浏览器不支持canvas，请下载最新版浏览器!</canvas>
        </div>
        <input type="button" value="生成验证码" class="ver_btn" onClick="validate();">
    </div>-->



    <div class="login" >注册</div>
    <a href="/movieshow/login.html" style="color: chocolate" class="common_use register">已有账号，去登录</a>
    <!--<a href="javascript:void(0)" style="color: chocolate" onclick="hidediv()" id="regist_by_phone" class="common_use change">手机验证注册</a>-->
</div>



<script type="text/javascript">


    var param1 = false;
    var param2 = false;
    var param3 = false;
    //var param4 = false;
    var type = 'normal_login';

    function hidediv(){


       /* $("#id").show()表示display:block,
            $("#id").hide()表示display:none;*/
        $("#div1_pas").hide();
        $("#phone_code").show();
        //$("#vali").hide();

        type = 'quick_login';
    }


    function mesLay(content){
        layer.open({
            content: content
            ,skin: 'msg'
            ,time: 3
        });
    }
    $(function(){

        function phone(){
            var reg = /^1[34578]\d{9}$/;
            var phoneVal = $('.tel').val();
            if(reg.test(phoneVal)){
                param1 = true;
            }else{
                mesLay('手机号码有误！')
            }
        }

        function pasd(){
            var psdVal = $('#pas').val();

            if(psdVal.length < 6){
                mesLay('您的密码少于6位数！');
                //return false;
            }else{
                param2 = true;
            }
        }
        //不同验证码验证
        /*function pasd1(){
            var psdVal = $('#J_codetext').val();

            if(psdVal.length < 6){
                mesLay('您的密码少于6位数！');
                //return false;
            }else{
                param4 = true;
            }
        }*/

        function code(){
            var code = $('#code').val();
            if(code=='' | code == null){
                mesLay('请输入验证码');
            }else{
                param3 = true;
            }
        }

        $('#code').blur(function () {
            code();
        })

        $('.tel').blur(function(){
            phone();
        });

        $('.pasd').blur(function(){
            pasd();
        });

        /*$('#J_codetext').blur(function(){
            pasd1();
        });*/



        $('.login').on('click',function(){
            alert('注册方法');




                if(param1 & param3& param3){
                    $.ajax({
                        url:'/login/regist',
                        data:{'account':$("#account").val(),'password':$("#pas").val(),'verificationCode':$("#code").val(),},
                        success:function (data) {
                            mesLay(data);
                            if(data == '注册成功'){
                                location.href="/movieshow/index.html";
                            }
                        }
                    })
                }else{
                    phone();
                    code();
                    pasd();
                }
        })
    })

    function getcode(){
        var flag1 = true;
        var flag2 = true;
        if(param1 == true){
            if(flag1 == true){
                $.ajax({
                    url:'/login/getCode',
                    data:{'account':$("#account").val()},
                })
                //flag1 = false;
                $("#chang_href").removeAttr("onclick");
            }
            //$("#chang_href").text("");
            if(flag2 == true){
                //flag2 = false;
                var setTime;
                var time=60;
                setTime=setInterval(function(){
                    if(time<=0){
                        $("#chang_href").text("重新获取手机验证码");
                        clearInterval(setTime);
                        $("#chang_href").attr('onclick','getcode()')
                        //flag1 = true;
                        //flag2 = true;
                        return;
                    }
                    time--;
                    $("#chang_href").text(time+"秒后重新获取验证码")
                },1000);
            }
        }else{
            var reg = /^1[34578]\d{9}$/;
            var phoneVal = $('.tel').val();
            if(reg.test(phoneVal)){
                param1 = true;
            }else{
                mesLay('手机号码有误！')
                //return false;
            }
        }
    }
</script>

</body>
</html>
